<template>
  <div class="ProjectStatistics">
      <div class="header">
          <div class="year">
              <a-date-picker
                  mode="year"
                  picker="year"
                  :open="open"
                  :bordered="false"
                  placeholder="请选择年份"
                  @openChange="openChangeOne"
                  @change="panelChangeOne"
              >
                  <template #suffixIcon>

                      <DownOutlined style="color: #fff;"/>
                  </template>
              </a-date-picker>
          </div>
          <div class="tabs">
              <zlc-tabs :datas="datas" @select="select"></zlc-tabs>
          </div>
      </div>
      <div class="main">
          <div class="chat">
              <zlc-chat :option="chatOption" id="bureauProjectStatistics"></zlc-chat>
          </div>
          <div class="legend" :style="{'--gridNum': legendData.length == 1 ? 1 : 2}">
            <div class="legendItem" v-for="(item, index) in legendData" :key="index">
                <div class="item">
                    <div class="title">
                        <div class="icon" :style="{'--color': colors[index]}">

                        </div>
                        <div class="text" :title="item.name">
                            {{ nameStr(item.name) }}
                        </div>
                    </div>
                    <div class="num">
                        {{ item.value }}
                    </div>
                </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import {onMounted, reactive, ref, computed} from 'vue'
import { getBureauProjectManagement } from "/src/api/api.js"
import zlcTabs from "../../../components/zlcTabs/zlcTabs.vue";
import moment from "dayjs"
import { DownOutlined } from '@ant-design/icons-vue';
import ZlcChat from "../../../components/zlcChat/zlcChat.vue";
import aes from "../../../utils/aes.js";
export default {
    name: "ProjectStatistics",
    components:{
        ZlcChat,
        zlcTabs,
        DownOutlined
    },
    setup(props, ctx){
        let colors = ref(['#549BF1', '#B4C9EF', '#B4C9EF', '#AA8A6E', '#3182EA', '#0DAEE3', '#BCBF5C', '#67D470'])
      let datas = ref([
          {
              name: '基地建设',
              field: ''
          },
          {
              name: '设备更新',
              field: ''
          }
      ])
        let open = ref(false)
        let yearData = ref("")
        let type = ref('')
        let legendData = ref([])

        //年份选择器 - 开关
        let openChangeOne = (val) => {
          open.value = !open.value
        }
        //年份选择器 - 选择事件
        let panelChangeOne = (value) => {
            yearData.value = moment(value).format("YYYY")
            getData(type.value, yearData.value)
        }

        //tabs切换
        let select = (val, index) => {
            type.value = index
            getData(index, yearData.value)
        }
        //图表配置项
        let chatOption = reactive({
            tooltip: {
                trigger: 'item',
                confine: true
            },
            legend: {
                show: false
            },
            series: [
                {
                    type: 'pie',
                    radius: ['65%', '80%'],
                    center: '50%',
                    avoidLabelOverlap: false,
                    color: colors,
                    itemStyle: {
                        borderColor: 'rgba(15, 26, 44, 0.5)',
                        borderWidth: 2,
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: []
                },
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['50%', '60%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        color: '#455f80'
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    tooltip:{
                        show: false
                    },
                    emphasis: {
                        scale: false // 禁止鼠标移入区域放大
                    },
                    data: [
                        {
                            value: 100,
                            label: {
                                normal:{
                                    position: 'center',
                                    show: true,
                                    rich:{
                                      a:{
                                          fontSize: '20',
                                          fontWeight: 'bold',
                                          color: "#eee"
                                      },
                                        b:{
                                            fontSize: '16',
                                            fontWeight: 'normal',
                                            color: "#eee"
                                        }
                                    },
                                    formatter: val => {
                                        let count = legendData.value.reduce((pre, next) => pre + next.value, 0)
                                        return "{a|" + count + "}" + '\n\n' + '{b|总计}'
                                    }
                                }
                            }
                        }
                    ]
                }
            ]
        })

        //请求接口 - 获取图表数据
        let getData = (type, year) => {
            let sysOrgCode = window.sysOrgCode
            getBureauProjectManagement({superQueryParams : JSON.stringify([{ field:"sysOrgCode", rule:"right_like", val: sysOrgCode }, { field: 'year', rule: 'eq', val: year }, { field: 'projectType', rule: 'eq', val: type }]) }).then(res => {
                chatOption.series[0].data = res.result.asset
                legendData.value = res.result.asset
            })
        }

        //图例名称过长 - 使用计算属性
        let nameStr = computed(() => {
            return name => {
                if(name.length > 10){
                    return name.substring(0, 10) + "..."
                }else{
                    return name
                }
            }
        })

        onMounted(() => {
            getData(0)
        })
        return {
            open,
            datas,
            yearData,
            openChangeOne,
            panelChangeOne,
            chatOption,
            select,
            type,
            legendData,
            nameStr,
            colors
        }
    }
}
</script>

<style scoped lang="less">
.ProjectStatistics{
    width: 100%;
    height: 100%;
    .header{
        height: 50px;
        padding: 10px 0;
        box-sizing: border-box;
        .year{
            width: 34%;
            height: 100%;
            display: inline-block;
            .ant-picker{
                width: 100%;
                height: 100%;
                background: url("/src/assets/datePicker.png") center center no-repeat;
                background-size: 100% 100%;
                color: #fff;
                padding: 0 10px;
                box-sizing: border-box;
                :deep(.ant-picker-input){
                    input{
                        color: #fff;
                        &::placeholder {
                            color: #fff;
                        }
                    }
                }
            }
        }
        .tabs{
            width: 66%;
            display: inline-block;
        }
    }
    .main{
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        flex-direction: row;
        align-items: center;
        .chat, .legend{
            height: 100%;
            .legendItem{
                width: 100%;
                height: fit-content;
                .item{
                    .title{
                        width: fit-content;
                        font-size: 16px;
                        font-family: OPPOSans;
                        font-weight: 400;
                        color: #AEC3DC;

                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        //justify-content: center;
                        .icon{
                            width: 8px;
                            height: 8px;
                            background: var(--color);
                            border-radius: 1px;
                            margin-right: 5px;
                        }
                        .text{

                        }
                    }
                    .num{
                        width: 100%;
                        font-size: 18px;
                        font-family: DIN;
                        font-weight: 500;
                        color: #DFECFB;
                        padding-left: 18px;
                        box-sizing: border-box;
                    }
                }


            }

        }
        .chat{
            width: 50%;
        }
        .legend{
            width: 50%;
            height: 100%;
            overflow-y: auto;
            /* 滚动条优化 start */
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            /* 无内容时的滚动条样式 */
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 1px rgba(19, 78, 166, 0.5);
                border-radius: 4px;
                background: rgba(19, 78, 166, 0.5);
            }

            /* 有内容时的滚动条样式 */
            &::-webkit-scrollbar-thumb {
                background: rgb(9, 108, 222);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: rgb(54, 127, 235);
            }

            &::-webkit-scrollbar-corner {
                background: rgba(19, 78, 166, 0.5);
            }

            /* 滚动条优化 end */
        }
    }
}
</style>
